/* switch thanks to this fancy generator: http://proto.io/freebies/onoff/ */
/* <!-- */
body {
    margin:0;
    padding:0;
}
#header h1,
#header h2,
#header p {
    margin-left:2%;
    padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
    font-weight:bold;
    text-decoration:none;
    color:#000;
}
#footer {
    clear:both;
    float:left;
    width:100%;
}
#footer p {
    margin-left:2%;
    padding-right:2%;
}

/* Start of Column CSS */
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}
/* --> */

.plus { margin: 0.1em auto; width: 256px; line-height: 256px; border: 10px solid black; font-size: 200px; text-align: center; font-weight:bold; }
.minus { margin: 0.1em auto; width: 256px; line-height: 256px; border: 10px solid black; font-size: 200px; text-align: center; font-weight:bold; }

li {
    list-style: none;
    font-size: 24px;
}
.goButton {
    font-size: 64pt;
    width: 200px;
    text-align: center
}
input[type="text"] {
    font-size: 64pt;
    width: 200px;
    text-align: center
}
p#currentTemp {
    font-size: 64pt;
    margin: 0px;
}
p#targetTemp {
    font-size: 64pt;
    margin: 0px;
}
p#daemonRunning{
    font-size: 16pt;
    color:#1BB300;
    font-weight:bold;
}
p#daemonNotRunning{
    font-size: 64pt;
    color:#FF0000;
    font-weight:1500;
}
p#cool{
    color:#2FCCFF;
    font-size: 12pt;
}
p#heat{
    color:#FF0000;
    font-size: 12pt;

}
p#fan{
    color:#00CC00;
    font-size: 12pt;
}
p#coolOn{
    color:#2FCCFF;
    font-size: 24pt;
    font-weight:bold;
}
p#heatOn{
    color:#FF0000;
    font-size: 24pt;
    font-weight:bold;
}
p#fanOn{
    color:#00CC00;
    font-size: 24pt;
    font-weight:bold;
}
/*the crazy switch bit*/

.onoffswitch {
position: relative; width: 125px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 49px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 39px; padding: 0; line-height: 39px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Cool";
padding-right: 80px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Heat";
padding-right: 10px;
background-color: #FF0000; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
width: 50px; margin: -5.5px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 49px;
position: absolute; top: 0; bottom: 0; right: 82px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
